<template>
	<div id="System">
		<ul>
			<li v-for="(item,key) in accountPermission.children"
				@click="$router.push({name:item.permissionDesc})"
				:key="item._id">
				<i :class='["fa",fontIcons[key]]' style="font-size: 130px;"></i>
				<span>{{item.permissionDesc}}</span>
			</li>
		</ul>
		<transition name="fade">		
			<router-view></router-view>
		</transition>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				fontIcons: ["fa-lock",'fa-address-card-o','fa-user-circle']
			}
		},
		computed:{
			accountPermission(){
				var accountPermission = this.$store.getters['accountPermission'];
				var obj = {};
				accountPermission.forEach((item)=>{
					if(item.permissionDesc=="系统管理"){
						obj = item;
						return;
					}
				})
				return obj;
			}
		},
	    beforeRouteUpdate(to, from, next){
	        console.log("路由发生变化了");
	        console.log(to);
	        if(to.name==="系统管理"){
	            this.$store.dispatch('loadAllRoles',{api:this.$apis.findAllRoles,pageSize:10,pageNo:1});
	        }
	        next();
	    },		
		mounted(){
//      	this.$store.dispatch('loadAllRoles',{api:this.$apis.findAllRoles,pageSize:10,pageNo:1});
    	}
	}
</script>

<style lang="scss" scoped>
#System{
	width: 100%;
    height: 100%;
    ul{
    	position: absolute;
    	left: 200px;
    	right: 0px;    	
        display: flex;
        flex-direction: row;
        li{        	
           flex:1;
           height: 200px;
           background: red;
           margin: 20px;
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           color:white;
           font-size:25px; 
           i {
            color: rgba(255, 255, 255, 0.5);
           }
           &:nth-child(1){
               background: linear-gradient(to right,lightblue,blue 99%);
           }
           &:nth-child(2){
               background: linear-gradient(to right,lightcyan,cyan)
           }
           &:nth-child(3){
               background: linear-gradient(to right,rgb(242, 157, 0),lightcoral)
           }
        }
    }
   
}
</style>